<template>
    <div class="topic" v-loading="loading">
        <topicQuery @change="getData" :prop="['ids', 'level', 'title']"/>
        <div>
            <adminTopicList :list="data.records" :handleDetele="handleDetele" :isEdit="true" @changeStatus="changeStatus"/>
        </div>
        <div class="footer-pagination" v-if="data">
            <el-pagination
            @size-change="i => {limit = i;getData(query)}"
            @current-change="i => {page = i;getData(query)}"
            :current-page="page"
            :page-sizes="limits"
            :page-size="limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import { getTopicList, delTopic, editTopic } from '@/api/topic'
    import adminTopicList from '@/components/topic/adminTopicList'
    import { mapState } from 'vuex'
    import topicQuery from '@/components/base/query.vue'
    export default {
        components : {
            adminTopicList,
            topicQuery,
        },
        data() {
            return {
                drawer : false,
                data : [],
                page : 1,
                limit : 10,
                topic : {},
                loading : false,
                query : {},
            }
        },
        computed : {
            ...mapState(['limits']),
        },
        created(){
            this.limit = this.limits[0]
            this.getData()
        },
        methods : {
            getData(query = {}){
                this.loading = true
                query.limit = this.limit
                query.page = this.page
                this.query = query
                getTopicList(query).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        res.data.records.forEach(n => n.status = n.status == 1)
                        this.data = res.data
                    }
                })
            },
            handleDetele(index, data){
                this.loading = true
                delTopic(data.id).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.$message.success('操作成功')
                        this.list.splice(index, 1)
                    }
                })
            },
            changeStatus(row){
                this.loading = true
                editTopic({
                    id : row.id,
                    status : row.status ? 1 : 0,
                    level : row.level
                }).then(res => {
                    if (res.code == 200) {
                        this.loading = false
                        this.$message.success('保存成功')
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
.topic{
    &>div{
        padding: 20px;
        background-color: #fff;
        margin: 10px 0;
        border-radius: 10px;
    }
    .footer-pagination{
        display: flex;
        justify-content: end;
    }
}
</style>